Leaflet文档阅读笔记 |
您所在的位置：网站首页 › leaflet geojson › Leaflet文档阅读笔记 |
Leaflet文档阅读笔记
|
目录
官方解析 博主例子 官方解析 个人觉得这官方教程给得是相当的好，因为功能非常的强大，在此记录下，方便以后使用，以后肯定会经常用到！ 此节将会学到从GeoJson对象中创建且调用map vectors。 GeoJson对象如下： var geojsonFeature = { "type": "Feature", "properties": { "name": "Coors Field", "amenity": "Baseball Stadium", "popupContent": "This is where the Rockies play!" }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } };可以通过下面这两种方式在地图上添加geojson L.geoJSON(geojsonFeature).addTo(map);或者 var myLayer = L.geoJSON().addTo(map); myLayer.addData(geojsonFeature);两种方式设置其风格 var myLines = [{ "type": "LineString", "coordinates": [[-100, 40], [-105, 45], [-110, 55]] }, { "type": "LineString", "coordinates": [[-105, 40], [-110, 45], [-115, 55]] }]; var myStyle = { "color": "#ff7800", "weight": 5, "opacity": 0.65 }; L.geoJSON(myLines, { style: myStyle }).addTo(map);及 var states = [{ "type": "Feature", "properties": {"party": "Republican"}, "geometry": { "type": "Polygon", "coordinates": [[ [-104.05, 48.99], [-97.22, 48.98], [-96.58, 45.94], [-104.03, 45.94], [-104.05, 48.99] ]] } }, { "type": "Feature", "properties": {"party": "Democrat"}, "geometry": { "type": "Polygon", "coordinates": [[ [-109.05, 41.00], [-102.06, 40.99], [-102.03, 36.99], [-109.04, 36.99], [-109.05, 41.00] ]] } }]; L.geoJSON(states, { style: function(feature) { switch (feature.properties.party) { case 'Republican': return {color: "#ff0000"}; case 'Democrat': return {color: "#0000ff"}; } } }).addTo(map);在地图上画一个点 var geojsonMarkerOptions = { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }; L.geoJSON(someGeojsonFeature, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, geojsonMarkerOptions); } }).addTo(map);当选点击点后，弹出某窗口 function onEachFeature(feature, layer) { // does this feature have a property named popupContent? if (feature.properties && feature.properties.popupContent) { layer.bindPopup(feature.properties.popupContent); } } var geojsonFeature = { "type": "Feature", "properties": { "name": "Coors Field", "amenity": "Baseball Stadium", "popupContent": "This is where the Rockies play!" }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } }; L.geoJSON(geojsonFeature, { onEachFeature: onEachFeature }).addTo(map);过滤 map中不显示"Busch Field" var someFeatures = [{ "type": "Feature", "properties": { "name": "Coors Field", "show_on_map": true }, "geometry": { "type": "Point", "coordinates": [-104.99404, 39.75621] } }, { "type": "Feature", "properties": { "name": "Busch Field", "show_on_map": false }, "geometry": { "type": "Point", "coordinates": [-104.98404, 39.74621] } }]; L.geoJSON(someFeatures, { filter: function(feature, layer) { return feature.properties.show_on_map; } }).addTo(map);博主例子 这里举个例子，GIS为自己本地搭建的。 把南京和合肥圈了出来，如下图所示：
当点击某个圆后
代码如下： test5.html Hello Test5 html, body { height: 100%; margin: 0; } #map { width: 100%; height: 100%; } .chart{ width: 600px; height: 300px; background-color: #fff; } var ign = new L.TileLayer.WMTS( "http://XXX.XXX.XXX.XXX:8080/geoserver/gwc/service/wmts" , { layer: 'GG_9:gg_9', tilematrixset: "EPSG:900913", Format : 'image/png', TileMatrix: 'EPSG:900913:8' } ); var map = L.map('map', { minZoom: 5, maxZoom: 7 }).setView([32, 118], 7); L.control.scale({'position':'bottomleft','metric':true,'imperial':false}).addTo(map); map.addLayer(ign); map.invalidateSize(true); function onEachFeature(feature, layer) { var popupContent = "弹出窗口，此城市为：" + feature.geometry.properties.popupContent; layer.bindPopup(popupContent); } //新加的代码 L.geoJSON([bicycleRental], { onEachFeature: onEachFeature, pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, { radius: 8, fillColor: "#ff7800", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.8 }); } }).addTo(map); //新加的代码geojson.js var bicycleRental = { "type" : "FeatureConllection", "features" : [ { "geometry" : { "type" : "Point", "coordinates" : [118.8, 32.05], "properties": { "popupContent" : "南京" } }, "type" : "Feature", "id" : 100 }, { "geometry" : { "type" : "Point", "coordinates" : [117.242, 31.8], "properties": { "popupContent" : "合肥" } }, "type" : "Feature", "id" : 101 } ] };这里要注意一点！
此处的经纬度是反过来的！！！！！ |
【本文地址】